<template>
  <div >
    <!-- <h1>6666</h1> -->
    <div>
      <van-sticky :offset-top="0">
            <!-- 顶格栏  -->
       <TopIndex> </TopIndex>
        </van-sticky>
        <!-- <van-sticky :offset-top="50">
       <MusicPlay ></MusicPlay>
        </van-sticky> -->
    </div>

      <div ref="container" style="height: auto;">
        <!-- router占位符 -->
        <!-- <keep-alive> -->
          <!-- <router-view :key="$route.fullPath" ></router-view> -->
          <router-view  ></router-view>
        <!-- </keep-alive> -->
        <!-- <van-sticky :container="this.container">
          <van-button type="warning">指定容器</van-button>
        </van-sticky> -->
      </div>
        <br/>

 
    <div id="footer" style="position: fixed; bottom: 0; height: auto;">
      <!-- 底部导航栏 -->
      <!-- 永远在底部 -->
      <MusicPlay ></MusicPlay>
      <BottomIndex></BottomIndex>
       
    </div>

 
  
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <MusicPlay v-if="false"></MusicPlay> -->

  </div>
</template>

<script>
import MusicPlay from './components/MusicPlay.vue';
import TopIndex from './views/Music/TopIndex.vue';
import BottomIndex from './views/Music/BottomIndex.vue';

export default {
  name: 'App',
  components: {
    MusicPlay,
    TopIndex,
    BottomIndex,
  },
  // data() {
  //   return {
  //     container: null,
  //   }
  // },
  //   mounted() {
  //   this.container = this.$refs.container;
  // },
}
</script>

<style lang="less">
#footer {
	position: relative;
	margin-top: -100px;/*等于footer的高度*/
	height: 100x;
	background: #c6f;
}
</style>
